<template>
	<view class="terclass_body">
		<view class="top_s" @click="tososo()">

			<view class="sousou">
				<i class='iconfont' style='font-size: 12px; font-weight: 100;'>&#xe63a;{{sousou}}</i>
			</view>

		</view>
		<view class="main_s">
			<view class="lefs">

				<view class="text-area" @click="logclasslistdata(item.id,item.name)" v-for="(item,index) in arr">
					<text class="lis" :class="isActive===index? 'title':''" @click="btn(index,item.id,item.name)">{{item.name}}</text>
				</view>
				
			</view>
			<view class="refs">
				<view class="Bluse item u-border-bottom" v-for="(items,index) in listst">
					<view class="bian" @click="toxiangQ(items.code)">
						<image style="width: 100%; height: 100%;" :src="items.cover" mode="">
						</image>
					</view>

					<view class="texts" @click="toxiangQ(items.code)">
						<p style='font-size: 13px; width: 124.5px; height: 35px; overflow: hidden;'>{{items.name}}</p>
						<p style='width: 100%; '><text style="color: red; font-size: 12px; ">￥</text>
							<text style="font-size: 25px; color: red;">{{items.price_selling}}</text>
						</p>
					</view>
				</view>

				<u-empty v-if="shoutishi" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
				<view class="" style="display: flex;justify-content: center;flex-direction: column; height: 30px;">
					<view style="">

					</view>
					<text style="color: #2A2A2A; text-align: center;font-size: 12px;">{{dixian}}</text>
				</view>

			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				shoutishi: false,
				sousou: '请输入',
				datalist: '',
				listst: [],
				arr: [],
				page: 0,
				clss: {
					page: 0,
					cateids: ''
				},
				isActive: 0,
				shoacarlist: {
					id: '',
					num: 0,
					type: '1'
				},
				zuijiid: {
					goods_id: 0
				},
				dixian: ''
			}
		},


		onReachBottom() {
			this.clss.page = this.clss.page + 1
			this.logclasslistdatas()
		},

		onLoad() {

		},

		onShow() {
			this.isActive = 0
			if (this.listst.length ==  0) {
				this.shoutishi = true
				this.dixian = ''
			} else {
				this.shoutishi = false
			}
			// this.userlist()
			this.logclasslist()
			
		},



		methods: {


			// userlist() {
			// 	let this_ = this
			// 	uni.getStorage({
			// 		key: "userdata",
			// 		success: function(res) {

			// 		}
			// 	})

			// },

			btn(index,id,name) {
				if(name == '全部'){
					this.clss.cateids = 0
				}
				this.isActive = index
				this.clss.page = 1
				this.listst = []
			},
			tososo() {
				uni.navigateTo({
					url: '../sousou/sousou'
				})
			},

			toxiangQ(id){
				console.log(id);
				uni.navigateTo({
					url: '../xiangqing/xiangqing?id='+id
				})
			},

			

			logclasslist() {
				this.$http.getCate().then(res => {
					this.arr = res.data
					this.logdatas()
				})
			},





			logclasslistdatas() {
				var this_s = this
				this.$http.getAllCateGoods(this.clss).then(res => {
					for (var i = 0; i < res.data.list.length; i++) {
						// this.listst.push(res.data.list[i])
						this_s.listst.push(res.data.list[i])
					}
					// console.log('**********');
					// console.log(this.listst);
					// console.log('**********');
					if (this.listst.length == 0) {
						this.dixian = ''
						this.shoutishi = true
					} else if (this.listst.length > 0) {
						this.dixian = '我是有底线的...'
					}
				})
			},


			logdatas() {
				this.listst =
					this.dixian = ''
				var this_s = this
				// for (var i = 0; i < this.arr.length; i++) {
				// 	this_s.clss.cateids = this.arr[0].id
				// }
				this.clss.page = 1
				this.cateids = ''
				this.$http.getAllCateGoods(this.clss).then(res => {
					console.log("*****");
					console.log(res.data);
					console.log("**********");
					
					this.listst = res.data.list

					if (this.listst.length == 0) {
						this.dixian = ''
						this.shoutishi = true
					} else if (this.listst.length > 0) {
						this.shoutishi = false
						this.dixian = '我是有底线的...'
					}

					

				})
			},


			logclasslistdata(id,name) {
				if(name=='全部'){
					id = ''
				}
				this.dixian = ''
				var this_s = this
				for (var i = 0; i < this.arr.length; i++) {
					this_s.clss.cateids = this.arr[0].id
				}
				this.clss.cateids = id
				this.$http.getAllCateGoods(this.clss).then(res => {
					// for (var i = 0; i < res.data.length; i++) {
					// 	this.listst.push(res.data[i])
					// }
					this.listst = res.data.list
					console.log("******");
					console.log(this.listst);
						console.log("******");
					if (this.listst.length == 0) {
						this.dixian = ''
						this.shoutishi = true
					} else if (this.listst.length > 0) {
						this.shoutishi = false
						this.dixian = '我是有底线的...'
					}

					

				})
			},

			addshopcar() {
				this.$http.postshaopinadd(this.shoacarlist).then(res => {
					console.log(res);
				})
			},


		}
	}
</script>


<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 3183672 */
		src: url('//at.alicdn.com/t/font_3183672_7auuq0uby8.woff2?t=1649825054243') format('woff2'),
			url('//at.alicdn.com/t/font_3183672_7auuq0uby8.woff?t=1649825054243') format('woff'),
			url('//at.alicdn.com/t/font_3183672_7auuq0uby8.ttf?t=1649825054243') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 25px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
<style>
	.item {

		color: $u-content-color;
		font-size: 28rpx;
	}

	.terclass_body {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.top_s {
		width: 100%;
		height: 60px;
		position: fixed;
		top: 0;
		z-index: 5;
		background-color: #ffffff;
	}

	.sousou {
		margin: 10px;
		background-color: #f7f7f7;
		/* border: 1px solid #C0C4CC; */
		border-radius: 20px;
		height: 30px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: left;
		padding-left: 10px;
		font-size: 13px;
		color: #c1c8d4;
	}

	.main_s {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		padding-bottom: 100px;
		padding-bottom: 50px;
		background-color: #F7F7F7;
		margin-top: 50px;
	}

	.refs {
		z-index: 0;
		width: 80%;
		height: 100%;
		/* background-color: #f6f9f2; */
		float: left;
		margin-left: 20%;
		padding-left: 10px;
		padding-top: 10px;
	}

	.lefs {
		border-radius: 5px;
		position: fixed;
		left: 0;
		top: 60px;
		width: 21%;
		height: 100%;
		text-align: center;
		background-color: #FFFFFF;
	}

	.lis {
		line-height: 50px;
		font-size: 13px;
		display: flex;
		font-weight: 500;
		border-left: 1px solid #FFFFFF;
		justify-content: center;
	}

	.title {
		width: 100%;
		color: #aa0000;
		background-color: #F7F7F7;
		border-left: 1px solid red;
	}

	.Bluse {
		display: inline-block;
		width: 45%;
		background-color: #fff;
		margin: 5px;
		border-radius: 10px;
	}

	.texts {
		margin: 10px;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		height: 80px;
	}

	.bian {
		height: 140px;
		border-radius: 5px;
		box-shadow: #0d2854;
		box-shadow: 0px 0px 1px 0px;
	}

	/* 
	.topimg {
		top: 0px;
		border-radius: 0 0 70% 70%;
		height: 3px;
		width: 140px;
	} */

	/* 	.tix {
		top: 0px;
		border-radius: 0 0 200px 200px;
		height: 15px;
		width: 60px;
		left: 40px;
		color: #fff;
		font-size: 10px;
		text-align: center;
	} */
	/* 
	.bottomimg {
		bottom: 0px;
		border-radius: 0 0 70% 70%;
		height: 3px;
		width: 140px;
	} */

	/* 	.bian>view {
		background-color: #aa0000;
		position: absolute;
	} */

	/* 	.reimg {
		top: 0px;
		border-radius: 0% 70% 70% 0%;
		height: 140px;
		width: 3px;
	} */

	/* 	.leimg {
		position: absolute;
		top: 0px;
		right: 0px;
		background-color: #aa0000;
		border-radius: 70% 0 0 70%;
		height: 140px;
		width: 3px;
		z-index: 8;
	} */
</style>
